<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- prevent修饰可以阻止默认事件，列如常见的form表单中submit事件 -->
        <button @contextmenu.prevent ="">右键默认事件</button>
        <!--  .stop可以阻止冒泡 -->
        <div @click="fn1">
            fn1
            <div @click.stop="fn2">
                fn2
            </div>
        </div>
        <br>
        <!-- 。capture可以把冒泡事件转化为捕获事件
            冒泡：由内向外传递事件，
            捕获：由外向内捕获事件
            
         -->
        <div @click.capture="fn1">
            outer2
            <div @click="fn2">inner2</div>
        </div>
        <br>


        <!-- 相当于e.target的语句 点击那一个就触发哪一个 并不会触发冒泡事件
        -->
        <div @click.self="fn1">
            outer3
            <div @click="fn2"> iner3</div>
        </div>

        <br>
        <!-- 只触发一次事件 后面都不触发 -->
        <div @click.once = 'fn1'>once</div>
        <br>
        <!-- 键盘事件 
            @keyup.13=>当触发回车的时候触发，
            @keyup.enter=>也可以书写键盘名 一样可以触发
            @keyup.space =>点击空格的时候触发
            @keydown.tab=>点击 tab触发 必须使用keydown使用，因为按下的瞬间就已经移动到下一行
            @keydown.esc=>点击esc之后 触发事件
         -->
        <input type="text" @keyup.13 ='fn1'>
        <input type="text" @keyup.enter = 'fn2'>
        <input type="text" @keyup.space ='fn2' >
        <input type="text" @keydown.tab="fn2">
        <input type="text" @keydown.esc="fn1">

    </div>

    <script>

        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    conut:0
                }
            },
            methods:{
                fn1(){
                    console.log('fn111')
                },
                fn2(){
                    console.log('fn222');
                }
            }
        })
    </script>
</body>
</html>